<template>
	<view class="forgetPass">
		<view class="loginDef">
			<image src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/login/loginDef2.png" mode="widthFix"></image>
		</view>
		<view class="forgetForm">
			<view class="title flex alignCenter">
				{{fromPage=='setting'?'修改密码':'忘记密码'}}
			</view>
			<view class="formItem flex alignCenter justConBetween">
				<image src="@/static/image/icons/tel2.png" mode="widthFix"></image>
				<input class="font14" type="number" v-model.trim="verForm.phoneNumber" maxlength="11" placeholder="请输入手机号">
				<uni-icons class="clear" type="clear" color="#ccc" size="18" @click="verForm.phoneNumber=''" v-if="verForm.phoneNumber"></uni-icons>
			</view>
			<view class="formItem flex alignCenter justConBetween">
				<image src="@/static/image/icons/ver.png" mode="widthFix"></image>
				<input class="font14" type="number" v-model.trim="verForm.verificationCode" maxlength="6" placeholder="请输入验证码">
				<uni-downtime class="verify font14" :tel="verForm.phoneNumber" :msgType="'FORGET_PASSWORD'"></uni-downtime>
			</view>
			<view class="formItem flex alignCenter justConBetween">
				<image src="@/static/image/icons/pass.png" mode="widthFix"></image>
				<input class="font14" type="text" v-if="showPass" v-model.trim="verForm.newPassword" maxlength="20" placeholder="请输入新密码">
				<input class="font14" password v-if="!showPass" v-model.trim="verForm.newPassword" maxlength="20" placeholder="请输入新密码">
				<uni-icons v-if="showPass" class="inputIcon" type="eye" size="18" @click="showPass=false"></uni-icons>
				<uni-icons v-if="!showPass" class="inputIcon" type="eye-slash" size="18" @click="showPass=true"></uni-icons>
			</view>
			<view class="tip font12 color999">密码必须包含大小写字母以及数字，长度在6-20位</view>
			<!-- 公共操作 -->
			<view class="noWidthBtn" @click="loginClick">确定</view>
		</view>
	</view>
</template>

<script>
	import { mobile,password } from "@/utils/verification.js"
	import { forgetPwd } from "@/api/login.js"
	import { getSmsCode } from "@/api/index.js"
	export default {
		data() {
			return {
				verForm:{
					appType:'',
					phoneNumber:'',
					newPassword:'',
					verificationCode:''
				},
				showPass:false,
				agree:false,
				fromPage:''
			}
		},
		onLoad(option) {
			if(option.from=='setting'){
				this.fromPage=option.from
			}
		},
		onReady() {
			if(this.fromPage=='setting'){
				uni.setNavigationBarTitle({
					title:'修改密码'
				})
			}
		},
		methods: {
			agreeClick(){
				this.agree=!this.agree
			},
			// 注册点击事件
			loginClick(){
				if(!(mobile.test(this.verForm.phoneNumber))){
					uni.showToast({
						icon:'none',
						title:'请填写标准手机号'
					})
					return
				}if(!this.verForm.verificationCode){
					uni.showToast({
						icon:'none',
						title:'请输入验证码'
					})
					return
				}else if(!(password.test(this.verForm.newPassword))){
					uni.showToast({
						icon:'none',
						title:'请填写新密码（密码必须包含大小写以及数字，长度在6-20位）'
					})
					return
				}else{
					this.forgetApi()
				}
			},
			// 调用登录API
			forgetApi(){
				this.verForm.appType=uni.getStorageSync('systemInfo').osName=='ios'?3:2
				forgetPwd(this.verForm).then((res)=>{
					if(res.code==100000){
						uni.showToast({
							icon:'none',
							title:'修改成功，请重新登录',
							duration:2000
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/login/login'
							})
						},2000)
					}
				}).catch((err)=>{})
			},
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.forgetPass{
	// padding: 100rpx 80rpx 0;
	box-sizing: border-box;
	.loginDef{
		text-align: right;
		padding: 0 30rpx 0;//48rpx 0 0;
		height: 400rpx;
		overflow: hidden;
		box-sizing: border-box;
		image{
			width:100%;
			height: 100%;
			display: block;
			margin: 0 auto;
		}
	}
	.forgetForm{
		padding:0 66rpx;
		box-sizing: border-box;
		.title{
			margin:48rpx 0 32rpx;
			font-size: 40rpx;
			font-weight: 600;
		}
		.formItem{
			margin:30rpx 0 0;
			position: relative;
			padding: 0 0 8rpx;
			border-bottom:1px solid $bordercolor;
			image{
				width: 48rpx;
				height: 48rpx;
				margin:0 12rpx 0 0;
			}
			.inputIcon{
				position: absolute;
				right: 20rpx;
				top:0;
				bottom:0;
				line-height: 80rpx;
				color:$colorccc !important;
			}
			.verify{
				color: $colorMain !important;
			}
		}
		input{
			height:100%;
			height: 80rpx;
			line-height: 80rpx;
			flex:1;
		}
		.tip{
			margin:15rpx 0 0;
		}
	}
	.noWidthBtn{
		height: 86rpx;
		line-height: 86rpx;
		border-radius: 15rpx;
		margin: 108rpx 0 0;
	}
}
</style>
